<template>
    <div class="">
        <div class="search-course">
            <div class="nav">
                <div class="nav-item">
                    <router-link to="/" style="color: #666;text-decoration: none;">首页&nbsp;&nbsp; / &nbsp;&nbsp; </router-link>
                </div>
                <div class="nav-item">
                    <router-link to="/search" style="color: black;text-decoration: none;">课程搜索</router-link>
                </div>
            </div>
            <!-- 专题 -->
            <div class="subject-list condition">
                <h3>专题：</h3>
                <div class="subject-item">
                    <span :class="{active:subjectId == 'all'}" @click="selectSubject('all')">全部专题</span>
                    <span 
                        :class="{active:subjectId == item.subjectId}" 
                        @click="selectSubject(item.subjectId)"
                        v-for="(item,index) in searchList" :key="index">{{ item.subjectTitle }}</span>
                </div>
            </div>
            <!-- 类型 -->
            <header class="course-type condition">
                <h3>类型：</h3>
                <span 
                    :class="{ active: selectedType === '' }" 
                    @click="selectCourseType('')"
                >全部类型</span>
                <span 
                    :class="{ active: selectedType === 'free' }" 
                    @click="selectCourseType('free')"
                >免费课程</span>
                <span 
                    :class="{ active: selectedType === 'pay' }" 
                    @click="selectCourseType('pay')"
                >付费课程</span>
                <span 
                    :class="{ active: selectedType === 'boutique' }" 
                    @click="selectCourseType('boutique')"
                >精品课程</span>
                <span 
                    :class="{ active: selectedType === 'discount' }" 
                    @click="selectCourseType('discount')"
                >限时折扣课程</span>
            </header>
            <!-- 方式 -->
            <header class="course-type condition">
                <h3>方式：</h3>
                <span 
                    :class="{ active: selectedCourseType === 'all' }" 
                    @click="selectCourseWay('all')"
                >全部方式</span>
                <span 
                    :class="{ active: selectedCourseType === 'live' }" 
                    @click="selectCourseWay('live')"
                >直播课程</span>
                <span 
                    :class="{ active: selectedCourseType === 'recorded' }" 
                    @click="selectCourseWay('recorded')"
                >录播课程</span>
            </header>
        </div>
    </div>
</template>
<script>
import { getSearch } from '@/api/request';
    export default {
        data() {
            return {
                searchList: [],
                selectedType: '',
                selectedCourseType: 'all',
                subjectId: "all",
            };
        },
        components: {},
        methods: {
            selectCourseType(type) {
                console.log(type);
                this.selectedType = type;
                this.$emit('courseTypeSelected', type);
            },
            selectCourseWay(type) {
                console.log('选中的课程方式:', type);
                this.selectedCourseType = type;
                this.$emit('courseWaySelected', type); // 触发事件传递选中的课程方式
            },
            selectSubject(id) {
                console.log('选中的专题 ID:', id);
                this.subjectId = id;
                this.$emit('subjectSelected', id);
            },
            
        },
        created() {
            getSearch().then(res => {
                console.log(res);
                this.searchList = res.rows;
            })
            const subjectId = this.$route.query.subjectId;
            if (subjectId) {
                this.subjectId = subjectId;
                this.selectSubject(subjectId);
            }
        },
        watch: {
        // 监听路由变化，处理通过链接进入的情况
            '$route.query.subjectId'(newVal) {
            if (newVal) {
                this.subjectId = newVal;
                this.selectSubject(newVal);
            } else {
                this.subjectId = 'all';
                this.selectSubject('all');
            }
        },
        deep: true // 深度监听，确保监听路由参数的变化
        }
    };
</script>
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none; 
}
.search-course{
    width: 1200px;
    margin: 0 auto; 
}
.nav {
    width: 1200px;
    margin: auto;
    padding: 20px 0 20px 10px;
    font-size: 16px;
}
.nav-item{
    display: inline-block;
    color: #666;
    font-size: 16px;
}
.condition{
    padding: 10px;
    background: #f4f4f4;
    box-sizing: border-box;
    >h3 {
        float: left;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        color: rgba(0, 0, 0, .5);
        font-weight: normal;
    }
    span {
        display: inline-block;
        min-width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 0 6px;
        padding: 0 5px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        &:hover{
            cursor: pointer;
        }
    } 
}
.subject-list{
    width: 1200px;
    margin: 2px auto;
    line-height: 30px;
    .subject-item{
        margin-left: 50px;
    }
}
.course-type{
    margin: 2px 0;
}
.active {
    color: #fff;
    background: #00cf8c;
}
</style>